<!DOCTYPE html>
<html>
<head>
	<title>业务中心</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/user.css">
	<style type="text/css">[v-cloak]{display: none;}</style>
</head>
<body class="user work body_bg">
<div id="app" v-cloak>
	<div class="head">
		<div class="avatar_box">
			<img src="img/avatar.png" class="avatar" alt="">
		</div>
		<div class="info">
			<p class="user">洛溪</p>
			<p class="mobile">18080153372</p>
		</div>
		<div class="login_out">
			<ul class="disFlex">
				<li>
					<div class="order">54单</div>
					<div class="info">当月单量</div>
				</li>
				<li>
					<div class="order">￥ 785</div>
					<div class="info">当月提成</div>
				</li>
				<li @click="location.href='order_add_m.html'">
					<div><img src="img/add_order.png" class="icon_add" alt=""></div>
					<div class="info">补单</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="box_shadow_ff notice ">
		<img src="img/laba.png" class="icon_notice" alt="">
		<div class="inline ellipse">这是一条通知这是一条通知这是一条通知这是一条通知这是一条通知这是一条通知</div>
	</div>
	<ul class="box_shadow_ff type_box">
		<li v-for="(a,i) in typeNav" @click="typeBtn(i)" :class="{on:typeOn==i}">{{a.item}}</li>
	</ul>
	<div class="search_div" v-if="typeOn==1||typeOn==0">
		<input type="text" class="search_input" placeholder="搜索 靓号/客户 名字/客户电话/下单日期">
		<span class="search"><img src="img/search_w.png" class="icon_search" alt=""></span>
	</div>
	<template v-if="typeOn==2">
		<div class="search_div2" v-show="time_if">
			<div class="search_div">
				<input type="text" class="search_input" placeholder="搜索 靓号/客户 客户电话/下单日期">
				<span class="search"><img src="img/search_w.png" class="icon_search" alt=""></span>
			</div>
			<div class="date_btn" @click="time_if=false">筛选日期</div>
		</div>
		<div class="search_div3" v-show="!time_if">
		<span class="search_btn" @click="time_if=true">
			搜索<img src="img/search.png" class="icon_search" alt="">
		</span>
			<div class="time_range inline">
				<input type="text" id="start" class="time_input"> 到
				<input type="text" id="end" class="time_input">
			</div>
		</div>
	</template>

	<div class="pad_usual">
		<div class="order">
			<!--已预留-->
			<ul class="order_list" v-show="typeOn==0">
				<li class="order_item">
					<div class="disFlex number">
						<div class="number_span">
							<span>139</span> <span>1010</span> <span>2959</span>
						</div>
						<div class="region">
							<span>成都</span> <span>移动</span>
						</div>
						<div class="bill">
							￥ 100 (含话费40元)
						</div>
					</div>
					<div class="disFlex info">
						<div class="customer">
							<p class="user">张志东</p>
							<p class="user_number">18158302953</p>
						</div>
						<div class="btn_box manage">
							<div class="btn on">完善资料</div>
							<div class="btn">取消订单</div>
							<div class="btn" @click="goDtl">查看详情</div>
						</div>
					</div>
				</li>
				<li class="order_item">
					<div class="disFlex number">
						<div class="number_span">
							<span>139</span> <span>1010</span> <span>2959</span>
						</div>
						<div class="region">
							<span>成都</span> <span>移动</span>
						</div>
						<div class="bill">
							￥ 100 (含话费40元)
						</div>
					</div>
					<div class="disFlex info">
						<div class="customer">
							<p class="user">张志东</p>
							<p class="user_number">18158302953</p>
						</div>
						<div class="btn_box manage">
							<div class="btn on" @click="goComplete">完善资料</div>
							<div class="btn">取消订单</div>
							<div class="btn"  @click="goDtl">查看详情</div>
						</div>
					</div>
				</li>
			</ul>
			<!--待确认-->
			<ul class="order_list" v-show="typeOn==1">
				<li class="order_item">
					<div class="disFlex number">
						<div class="number_span">
							<span>139</span> <span>1010</span> <span>2959</span>
						</div>
						<div class="region">
							<span>成都</span> <span>移动</span>
						</div>
						<div class="bill">
							￥ 100 (含话费40元)
						</div>
					</div>
					<div class="disFlex info">
						<div class="customer">
							<p class="user">张志东</p>
							<p class="user_number">18158302953</p>
						</div>
						<div class="btn_box manage">
							<div class="btn on" @click="goAddMoney">补交尾款</div>
							<div class="btn" @click="goDtl(1)">查看详情</div>
							<div class="btn">取消订单</div>
						</div>
					</div>
				</li>
				<li class="order_item">
					<div class="disFlex number">
						<div class="number_span">
							<span>139</span> <span>1010</span> <span>2959</span>
						</div>
						<div class="region">
							<span>成都</span> <span>移动</span>
						</div>
						<div class="bill">
							￥ 100 (含话费40元)
						</div>
					</div>
					<div class="disFlex info">
						<div class="customer">
							<p class="user">张志东</p>
							<p class="user_number">18158302953</p>
						</div>
						<div class="btn_box manage">
							<div class="btn active" @click="goDtl(3)">调整资料</div>
							<div class="btn">取消订单</div>
							<div class="btn" @click="goDtl(1)">查看详情</div>
						</div>
					</div>
				</li>
				<li class="order_item">
					<div class="disFlex number">
						<div class="number_span">
							<span>139</span> <span>1010</span> <span>2959</span>
						</div>
						<div class="region">
							<span>成都</span> <span>移动</span>
						</div>
						<div class="bill">
							￥ 100 (含话费40元)
						</div>
					</div>
					<div class="disFlex info">
						<div class="customer">
							<p class="user">张志东</p>
							<p class="user_number">18158302953</p>
						</div>
						<div class="btn_box manage">
							<div class="btn" @click="order_change(1)">修改资料</div>
							<div class="btn">取消订单</div>
							<div class="btn">查看详情</div>
						</div>
					</div>
				</li>
			</ul>
			<!--已完成-->
			<ul class="order_list" v-show="typeOn==2">
				<li class="order_item">
					<div class="disFlex number">
						<div class="number_span">
							<span>139</span> <span>1010</span> <span>2959</span>
						</div>
						<div class="region">
							<span>成都</span> <span>移动</span>
						</div>
						<div class="bill">
							￥ 100 (含话费40元)
						</div>
					</div>
					<div class="disFlex info justify">
						<div class="customer">
							<p class="user">张志东</p>
							<p class="user_number">18158302953</p>
						</div>
						<div class="commission">
							<p class="price">￥1000</p>
							<p class="tips">该单提成</p>
						</div>
						<div class="btn_box manage">
							<div class="btn" @click="order_end(1)">查看详情</div>
						</div>
					</div>
				</li>
				<li class="order_item">
					<div class="disFlex number">
						<div class="number_span">
							<span>139</span> <span>1010</span> <span>2959</span>
						</div>
						<div class="region">
							<span>成都</span> <span>移动</span>
						</div>
						<div class="bill">
							￥ 100 (含话费40元)
						</div>
					</div>
					<div class="disFlex info">
						<div class="customer">
							<p class="user">张志东</p>
							<p class="user_number">18158302953</p>
						</div>
						<div class="commission">
							<p class="price">￥400</p>
							<p class="tips">该单提成</p>
						</div>
						<div class="btn_box manage">
							<div class="btn" @click="order_end(2)">查看详情</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>

</div>
<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/public.js"></script>
<script type="text/javascript">
var app = new Vue({
	el:"#app",
	data:{
	    typeNav:[{item:"已预留"},{item:"待确认"},{item:"已完成"}],
		typeOn:0,
		time_if:true,
	},
	methods:{
		typeBtn:function (i) {
			this.typeOn=i;
			if(i==2){this.time_if=false;}
        },
        goDtl:function (i) {
			location.href="means_work.html?type="+i;
        },
        goComplete:function () {
			location.href="order_offline.html"
        },
        order_end:function (i) {
			location.href="order_book_work.html?type="+i
        },
        order_change:function (i) {
			location.href="order_book_work.html?type="+i;
        },
        goAddMoney:function () {
			location.href="order_add_money_work.html"
        }

	},
	created:function(){},
	mounted:function(){}
})	

</script>
</body>
</html>